<template>
    <view class="page savepadding">
        <view class="card">
            <view class="title1">{{filterNull(brandName)+" "+filterNull(seriesName)}}</view>
            <view class="desc">{{filterNull(modelName)}}</view>
        </view>
        <view class="card">
            <view class="title">方案信息</view>
            <view class="list inline">
                <view class="label" v-if="schemeType==2 || schemeType==4">购车方式<text style="color:red">*</text></view>
                <view class="label" v-else>租赁方式<text style="color:red">*</text></view>
                <view class="text">{{filterNull(schemeTypeStr)}}</view>
            </view>
            <view class="line"></view>
            <view class="list">
                <view class="label" v-if="schemeType==2 || schemeType==4">购车时长<text style="color:red">*</text></view>
                <view class="label" v-else>租赁时长<text style="color:red">*</text></view>
                <view class="table">
                    <view class="row" v-for="(item, index) in dataList" :key="index" :class="{'itemActive':selectItem === index}" @click="selectItem = index">
                        <view class="span">
                            <view v-if="schemeType==2">整备费</view>
							<view v-else-if="schemeType==4">首付</view>
                            <view v-else>保证金</view>

                            <view v-if="schemeType==2">{{item.servicingFee?item.servicingFee:'0'}}元</view>
							<view v-else-if="schemeType==4">{{item.downPayment?item.downPayment:'0'}}元</view>
                            <view v-else>{{item.deposit?item.deposit:'0'}}元</view>
                        </view>
                        <view class="span">
                            <view>月租金</view>
                            <view>{{item.monthlyRent?item.monthlyRent:'0'}}元</view>
                        </view>
                        <view class="span">
                            <view>期数</view>
                            <view>{{filterNull(item.tenancy)}}期</view>
                        </view>
                        <view class="span">
                            <view v-if="schemeType==2 || schemeType==4">尾款</view>
                            <view v-else>服务费</view>

                            <view v-if="schemeType==2 || schemeType==4">{{item.balance?item.balance:'0'}}元</view>
                            <view v-else>{{item.coverCharge?item.coverCharge:'0'}}元</view>
                        </view>
                    </view>

                </view>
            </view>
        </view>
		
		<view style="height: 125upx;">
			
		</view>
		
        <!-- 按钮区 -->
        <view style="background:#fff">
            <view class="bottom_btns savepadding">
                <view class="button" @click="pre">上一步</view>
                <view class="button" @click="next">确定</view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    schemesublist
} from '../../common/api.js';
export default {

    data() {
        return {
            brandName: '',
            schemeId: '',
            seriesName: '',
            modelName: '',
            schemeTypeStr: '',
            schemeType: 0, //1.直购，2分期购车，3租赁 4.金融分期
            dataList: [],
            selectItem: 0,
            modelId: '',
        };
    },
	computed: {
		deptId() {
		    return this.$store.state.user.deptId;
		},
	},
    methods: {
        getData() {
            schemesublist({
                params: {
                    schemeId: this.schemeId,
					deptId: this.deptId
                }
            }).then(res => {
                this.dataList = res;
            })
        },

        pre() {
            uni.navigateBack()
        },

        next() {
            uni.navigateTo({
                url: '/pages/confirm_order/confirm_order?data=' + JSON.stringify(this.$data),
            })
        }
    },
    onLoad(op) {
        this.brandName = op.brandName;
        this.seriesName = op.seriesName;
        this.modelName = op.modelName;
        this.schemeTypeStr = op.schemeTypeStr;
        this.schemeId = op.schemeId;
        this.schemeType = op.schemeType;
        this.modelId = op.modelId;

        console.log(this.schemeType);
        this.getData();
    }

}
</script>

<style lang="scss" scoped>
.page {
    padding: $page_padding;
}

.card {
    padding: 40upx 40upx;
    margin-bottom: 30upx;

    .title1 {
        font-size: 28upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 27upx;
    }

    .title {
        font-size: 32upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 29upx;
    }

    .desc {
        font-size: 28upx;
        font-weight: bold;
        color: #999;
    }

    .line {
        margin-bottom: 30upx;
        border-bottom: 1px solid #ddd;
    }

    .list {
        &.inline {
            display: flex;
            justify-content: space-between;
        }

        .label {
            margin-bottom: 30upx;
            font-size: 28upx;
            font-weight: bold;
            color: #333;
        }

        .text {
            font-size: 28upx;
            font-weight: bold;
            color: #999;
        }

        .table {
            .row {
                height: 128upx;
                display: flex;
                justify-content: space-around;
                align-items: center;
                text-align: center;
                border-radius: 10px;
                font-size: 26upx;
                font-weight: bold;

                // &:nth-child(odd) {
                // 	background: #12baa4;
                // 	color: #fff;
                // }
            }
        }
    }
}

.itemActive {
    background-color: $green12;
    color: $white;
}

.bottom_btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
    .button {
        flex: 1;
        line-height: 96upx;
        font-weight: bold;
    }

    .button:nth-child(1) {
        background: #fff;
        color: #666;
    }

    .button:nth-child(2) {
        background: #12baa4;
        color: #fff;
    }
}
</style>
